<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <title>影院选座订座</title>
    <meta name="keywords" content="jQuery,选座">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css\iconfont\Rjdaoico.css" type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/seats.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css\common.css">
</head>

<body>
<header>
    <iframe src="${pageContext.request.contextPath}/top.jsp" frameborder="0" scrolling="no" id="top"></iframe>
</header>
    <div id="main" style="margin-top:60px;">
        <c:if test="${user != null}">
        <div class="demo">
            <div id="seat-map">
                <div class="front">屏幕</div>
            </div>
            <div class="booking-details">
                <p>影片：<span>${movie.movieName}</span></p>
                <p>时间：<span>${schedule.beginDate}年${schedule.beginHour}:${schedule.beginMinute}</span></p>
                <p>座位：</p>
                <ul id="selected-seats"></ul>
                <p>票数：<span id="counter">0</span></p>
                <p>总计：<b>￥<span id="total">0</span></b></p>
                <button class="checkout-button" id="cheatTicket">确定购买</button>
                <p id="msg"></p>
                <div id="legend"></div>
            </div>
            <div style="clear:both"></div>
        </div>

        <br />
        </c:if>
        <c:if test="${user == null}">
            <div class="md">
                <i class="icon-ee56"> <strong>施主，你还未登录，怎可购票喃~</strong></i>
            </div>
        </c:if>
    </div>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.seat-charts.min.js"></script>
    <script type="text/javascript">
        /*票价*/
        var price = ${schedule.moviePrise};
        //座位列
        var oldRow = [];
        //座位排
        var oldColumn = [];
        //总座位
        var seatTotal = ${seatTotal}
        //用户信息
        var memberName = "${sessionScope.user.memberName}";
        //座位图
        // var map = [];
        // function initMap(seatTotal){
        //     console.log(seatTotal);
        //     var initColumn = 0;
        //     if(seatTotal % 9 > 0){
        //         initColumn = seatTotal/9+1;
        //     }else{
        //         initColumn = seatTotal/9;
        //     }
        //     for(var i=0;i<initColumn;i++){
        //         var str = "";
        //     }
        //     console.log(initColumn);
        //     return map;
        // }
        // initMap(90);
        function showSeat(row,column){
            //座位数组下标
            var listIndex = 0;
            var $cart = $('#selected-seats'),
                /*座位区*/
                $counter = $('#counter'),
                /*票数*/
                $total = $('#total'); /*总计金额*/

            var sc = $('#seat-map').seatCharts({
                map: [ /*座位图*/
                    'aaaa_aaaaa',
                    'aaaa_aaaaa',
                    'aaaa_aaaaa',
                    'aaaa_aaaaa',
                    'aaaa_aaaaa',
                    'aaaa_aaaaa',
                    'aaaa_aaaaa',
                    'aaaa_aaaaa',
                    'aaaa_aaaaa',
                    'aaaa_aaaaa'
                ],
                naming: {
                    top: false,
                    getLabel: function(character, row, column) {
                        return column;
                    }
                },
                legend: { /*定义图例*/
                    node: $('#legend'),
                    items: [
                        ['a', 'available', '可选座'],
                        ['a', 'unavailable', '已售出']
                    ]
                },
                click: function() { /*点击事件*/
                    if (this.status() == 'available') { /*可选座*/
                        $('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座</li>')
                            .attr('id', this.settings.id)
                            .data('seatId', this.settings.id)
                            .appendTo($cart);

                        oldRow[listIndex] = this.settings.row + 1;
                        oldColumn[listIndex] = this.settings.label;
                        listIndex+=1;
                        $counter.text(sc.find('selected').length + 1);
                        $total.text(recalculateTotal(sc) + price);

                        return 'selected';
                    } else if (this.status() == 'selected') { /*已选中*/
                        /*更新数量*/
                        $counter.text(sc.find('selected').length - 1);
                        /*更新总计*/
                        $total.text(recalculateTotal(sc) - price);

                        /*删除已预订座位*/
                        $('#cart-item-' + this.settings.id).remove();
                        /*可选座*/
                        return 'available';
                    } else if (this.status() == 'unavailable') { /*已售出*/
                        return 'unavailable';
                    } else {
                        return this.style();
                    }
                }
            });
            //初始化页面右侧购票信息
            $("#selected-seats").empty();
            $("#counter").text("0")
            $("#total").text("0");
            //新建数组存入已售出座位的坐标
            var isSellSeat = new Array;
            for(var i =0;i<row.length;i++){
                isSellSeat.push(row[i]+'_'+column[i]);
            }
            /*已售出的座位*/
            sc.get(isSellSeat).status('unavailable');
        }
        //页面初始化座位表
        showSeat(${row},${column});
        document.getElementById("cheatTicket").onclick = function CheatTicket(){
            var scheduleId = ${schedule.scheduleId}
            var hallId = ${schedule.hallId};
            var total = document.getElementById("total").innerHTML;
            if(total<=0){
                alert("请选座后再购票");
            }else{
                $.ajax({
                    url:"BuyTicket",
                    method:"post",
                    traditional:"true",
                    data:{
                        "oldRow":oldRow,
                        "oldColumn":oldColumn,
                        "total":total,
                        "scheduleId":scheduleId,
                        "hallId":hallId,
                        "memberName":memberName
                    },
                    success:function (data){
                        var row = data[0];
                        console.log(row);
                        var column = data[1];
                        console.log(column);
                        showSeat(row,column);
                        $("#msg").text("购买成功！").css("font-size","30px")
                        setTimeout(function(){
                            $("#msg").text("");
                        }, 3000)
                    }
                })
            }
        }

        /*计算总金额*/
        function recalculateTotal(sc) {
            var total = 0;
            sc.find('selected').each(function() {
                total += price;
            });

            return total;
        }
    </script>


<iframe src="${pageContext.request.contextPath}/foot.jsp" frameborder="0" scrolling="no" id="foot"></iframe>
</body>

</html>
